<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- jQuery 2.2.3 -->
<script src="${APP_PATH }/jquery/jquery-2.2.3.min.js"></script>
<link href="${APP_PATH }/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="${APP_PATH }/assets/font-awesome-4.7.0/css/font-awesome.min.css" />
<!-- Ionicons -->
<link rel="stylesheet" href="${APP_PATH }/assets/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="${APP_PATH }/assets/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
	href="${APP_PATH }/assets/dist/css/skins/skin-blue.min.css">
<script type="text/javascript" src="${APP_PATH }/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="${APP_PATH }/assets/dist/js/app.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- Main Header -->
		<header class="main-header">

			<!-- Logo -->
			<a href="" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"></span> <!-- logo for regular state and mobile devices -->
				<span class="logo-lg">员工权限管理系统</span>
			</a>

			<!-- Header Navbar -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
					role="button"> <span class="sr-only">Toggle navigation</span>
				</a>
					
				
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">

			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">

				<!-- Sidebar user panel (optional) -->
				<div class="user-panel">
					<div class="pull-left info">
						<p class="user_name"></p>
						<!-- Status -->
						<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
					</div>
				</div>


				<!-- Sidebar Menu -->
				<ul class="sidebar-menu">
                    
                    <li><a href=""><i class="fa fa-home"></i>&nbsp;首页</a></li>
                    
                    <li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>我的考勤</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="${APP_PATH }/attendController/goAttendInfo">打卡记录</a></li>
							<li><a href="">补签记录</a></li>
							<li><a href="">待办补签</a></li>
						</ul></li>
					
					<!-- Optionally, you can add icons to the links -->
					<li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>员工管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="${APP_PATH }/employeeController/goEmp">员工信息</a></li>
							<li><a href="">员工考勤</a></li>
						</ul></li>
						
					<li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>部门管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="">部门信息</a></li>
						</ul></li>
				    
			       <li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>数据管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="">会话管理</a></li>
							<li><a href="">日志记录</a></li>
						</ul></li>
					
				</ul>
				<!-- /.sidebar-menu -->
			</section>
			<!-- /.sidebar -->
		</aside>
        
        <div class="content-wrapper">
          <div class="row">
			<div class="col-md-12">
				<table class="table table-bordered" id="attendinfo_table">
				  <thead>
					<tr>
						<th>序号</th>
                        <th>考勤日期</th>
                        <th>星期</th>
                        <th>早打卡</th>
                        <th>晚打卡</th>
                        <th>缺勤时长(分钟)</th>
                        <th>考勤状态</th>
                        <th>操作</th>
					</tr>
				  </thead>
				  <tbody>
				  
				  </tbody>
				</table>
			</div>
		</div>
		
	    <!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
				
			</div>
		</div>

	</div>
			
		</div>
		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		<footer class="main-footer">
			<strong>Copyright &copy; 2016 <a href="#">员工权限管理系统</a>.
			</strong> All rights reserved.
		</footer>

	</div>
	<script type="text/javascript">
	
	   //查出所有员工考勤记录并且显示在列表下面
	   //1.页面加载完成以后,直接去发送ajax请求,要到分页数据
       $(function(){
    	  to_page(1);   
       });
	   
	   function to_page(pn){
		   $.ajax({
			  url:"${APP_PATH}/attendController/AttendInfo",
			  data:"pn="+pn,
			  method:"GET",
			  success:function(result){
				//console.log(result);
	    		    //1.解析并显示员工数据
	    		    build_emps_table(result);
	    		    //2.解析并显示分页信息
	    		    build_page_info(result);
	    		    //3.解析分页条信息
	    		    build_page_nav(result);
			  }		  
		   });
	   }
	   
	   function build_emps_table(result){
	    	 //清空table表格
	    	 $("#attendinfo_table tbody").empty();
	    	 var attend = result.extend.pageinfo.list;
	    	 $.each(attend,function(index,item){
	    		 var id = $("<td></td>").append(item.id);
	    		 
	    		 var attendDate1 = new Date(item.attendDate).toLocaleDateString();
	             
	    		 var attendDate = $("<td></td>").append(attendDate1);
	             var attendWeek = $("<td></td>").append(item.attendWeek);
	             
	    		 var attendMorning1 = new Date(item.attendMorning).toLocaleTimeString();
	             
	             var attendMorning = $("<td></td>").append(attendMorning1);
	             
	    		 var attendEvening1 = new Date(item.attendEvening).toLocaleTimeString();
	             
	             var attendEvening = $("<td></td>").append(attendEvening1);
	             var absence = $("<td></td>").append(item.absence);
	             var attendStatus = $("<td></td>").append(item.attendStatus);
	             var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
	                 .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
	             var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
					.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
	             //为删除按钮添加一个自定义的属性来表示当前删除的员工id
	             delBtn.attr("del-id",item.empId);
	             var TdBtn = $("<td></td>").append(editBtn).append(delBtn);
	             //append方法执行完成以后还是返回原来的元素
	    		 $("<tr></tr>").append(id)
	    		 .append(attendDate)
	    		 .append(attendWeek)
	    		 .append(attendMorning)
	    		 .append(attendEvening)
	    		 .append(absence)
	    		 .append(attendStatus)
	    		 .append(TdBtn)
	    		 .appendTo("#attendinfo_table tbody");
	    	 });
	     }
	     
	     //解析显示分页信息
	     function build_page_info(result){
	    	 $("#page_info_area").empty();
	    	 $("#page_info_area").append("当前"+result.extend.pageinfo.pageNum+"页,总"+
	    			 result.extend.pageinfo.pages+"页,总"+
	    			 result.extend.pageinfo.total+"条记录");
	    	 currentPage = result.extend.pageinfo.pageNum;
	     }
	     
	     //解析显示分页条
	     function build_page_nav(result){
	    	 $("#page_nav_area").empty();
	         var ul = $("<ul></ul>").addClass("pagination");
	    	 var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
	    	 var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			 
	    	 if(result.extend.pageinfo.hasPreviousPage == false){
	    		 firstPage.addClass("disabled");
	    		 prePageLi.addClass("disabled");
	    	 }else{
	    		 //为元素添加点击翻页的事件
	    		 firstPage.click(function(){
	    			to_page(1); 
	    		 });
	    		 prePageLi.click(function(){
	    			to_page(result.extend.pageinfo.pageNum-1); 
	    		 });
	    	 }
	    	 
	    	 var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
	    	 var lastPage = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
	       
	    	 if(result.extend.pageinfo.hasNextPage == false){
	    		 nextPageLi.addClass("disabled");
	    		 lastPage.addClass("disabled");
	    	 }else{
	    		 //为元素添加点击翻页事件
	    		 nextPageLi.click(function(){
	    			to_page(result.extend.pageinfo.pageNum+1); 
	    		 });
	    		 lastPage.click(function(){
	    			to_page(result.extend.pageinfo.pages); 
	    		 });
	    	 }
	    	 
	    	 ul.append(firstPage).append(prePageLi);
	    	 //1 2 3
	         $.each(result.extend.pageinfo.navigatepageNums,function(index,item){
	        	var numLi = $("<li></li>").append($("<a></a>").append(item)); 
	        	if (result.extend.pageinfo.pageNum == item) {
					numLi.addClass("active");
				}
	        	numLi.click(function(){
	        		to_page(item);
	        	});
	        	ul.append(numLi);
	         });
	    	 //添加下一页和末页的提示
	    	 ul.append(nextPageLi).append(lastPage);
	    	 //把ul加入到nav
	    	 var navEle = $("<nav></nav>").append(ul);
	    	 navEle.appendTo("#page_nav_area");
	     }   
	     
	         //单个删除
	         $(document).on("click",".delete_btn",function(){
	        	 //1.弹出是否确认删除对话框
	        	 //alert($(this).parents("tr").find("td:eq(1)").text());
	             var empName = $(this).parents("tr").find("td:eq(1)").text();
	             var empId = $(this).attr("del-id");
	             if(confirm("确认删除【"+empName+"】吗?")){
	            	//确认,发送ajax请求删除即可
	            	$.ajax({
	            		url:"${APP_PATH}/employeeController/emps/"+empId,
	            		type:"DELETE",
	            		success:function(result){
	            			alert(result.msg);
	            			to_page(currentPage);
	            		}
	            	});
	             }
	         });
	   
    </script>
	
</body>
</html>